<template>
  <el-row class="tac">
    <el-col :span="24">
      <!-- unique-opened  只保证一个选中-->
      <el-menu class="el-menu-vertical-demo" :default-active="activeroute" @open="handleOpen" @close="handleClose"
        unique-opened router background-color="#ffffff" text-color="#000000" active-text-color="#ffd04b">

        <el-submenu :index="index" v-for="(item,index) in nav" :key="index">
          <template slot="title">
            <i :class="item.class"></i>
            <span>{{item.name}}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item  v-for="(a,b) in item.list" :key="b" :index="a.url" >{{a.name}}</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
    
        <el-submenu index="20" v-if="application_show">
          <template slot="title">
            <i class="el-icon-con7"></i>
            <span>应用管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/index/application">应用管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>


      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
  export default {
    data() {
      return {
        activeroute: '',
        application_show: false,
        nav: [{
          name: '权限管理',
          class: 'el-icon-con1',
          list: [{
            name: '权限管理',
            url: '/index/jurisdictionall',
            show: true
          }]
        },{
          name: '运营数据',
          class: 'el-icon-con8',
          list: [{
            name: '总体数据',
            url: '/index/operationdata/population/index',
            show: true
          },{
            name: '监控数据',
            url: '/index/operationdata/monitor/index',
            show: true
          },{
            name: '分析数据',
            url: '/index/operationdata/index',
            show: true
          }]
        },{
          name: '用户管理',
          class: 'el-icon-con1',
          list: [{
            name: '用户管理',
            url: '/index/consumer',
            show: true
          }]
        },{
          name: '订单管理',
          class: 'el-icon-con5',
          list: [{
            name: '果种订单',
            url: '/index/exchangeorder1',
            show: true
          },{
            name: '果米订单',
            url: '/index/exchangeorder',
            show: true
          },{
            name: '收获订单',
            url: '/index/receivingorder',
            show: true
          },{
            name: '果种售后',
            url: '/index/thaw',
            show: true
          }]
        },{
          name: '客服售后',
          class: 'el-icon-con7',
          list: [{
            name: '解冻申请',
            url: '/index/aftersale',
            show: true
          }]
        },{
          name: '团队管理',
          class: 'el-icon-con3',
          list: [{
            name: '运营中心',
            url: '/index/operate',
            show: true
          },{
            name: '团队管理',
            url: '/index/team',
            show: true
          },{
            name: '权限设置',
            url: '/index/jurisdiction',
            show: true
          }]
        },{
          name: '内容管理',
          class: 'el-icon-con6',
          list: [{
            name: '百果健康',
            url: '/index/infor',
            show: true
          },{
            name: '教程管理',
            url: '/index/course',
            show: true
          }]
        },{
          name: '积分管理',
          class: 'el-icon-con9',
          list: [{
            name: '兑换管理',
            url: '/index/guomi',
            show: true
          },{
            name: '金豆券管理',
            url: '/index/coupon',
            show: true
          },{
            name: '金豆券派发',
            url: '/index/couponsell',
            show: true
          },{
            name: '功能设置',
            url: '/index/setting',
            show: true
          },{
            name: '生成果种',
            url: '/index/land',
            show: true
          }]
        },{
          name: '业务管理',
          class: 'el-icon-con2',
          list: [{
            name: '直播间管理',
            url: '/index/room',
            show: true
          },{
            name: '信用系统',
            url: '/index/credit',
            show: true
          },{
            name: '庄园管理',
            url: '/index/manor/index',
            show: true
          },{
            name: '签到管理',
            url: '/index/sign',
            show: true
          },{
            name: '活动管理',
            url: '/index/activity/index',
            show: true
          },{
            name: '果种挂卖',
            url: '/index/exchangguamai',
            show: true
          }]
        }]
      }
    },
  
    created() {

      this.activeroute = this.$route.path //防止刷新时锁定不了路由
      this.show_fun()
    },
    watch: { //监听路由变化
      '$route': 'upgetPath'
    },
    methods: {
      show_fun() {

        this.post("upgrade/enable", {}).then(res => {
          //console.log(res)
          if (res.error_code == 0) {
            if (res.result == false) {
              this.application_show = false
            } else if (res.result == true) {
              this.application_show = true
            }

          } else {

          }

        })

      },
      upgetPath() { //监听路由变化
        this.activeroute = this.$route.path
      },
      handleOpen(key, keyPath) {
        // console.log(key, keyPath)
      },
      handleClose(key, keyPath) {
        // console.log(key, keyPath)
      }
    }
  }
</script>
<style scoped>
  .el-menu {
    border: none;
    /* box-shadow: 3px 0px 7px 0px #E0E9FC; */
  }

  .el-submenu .el-menu-item {
    min-width: 100%;
  }

  /* .el-submenu .is-active{
    background: linear-gradient(90deg,  #5962FF, #8265FF);
    border-radius: 0px 8px 8px 0px;
    color: white !important;
    width: 175px;
} */
  .el-submenu .el-menu-item-group {
    margin-top: -14px;
  }

  /* .el-menu-item-group>>>.el-menu-item-group__title{
       padding:0px;
} */
  .el-menu-item-group>>>.el-menu-item-group__title .title_box {
    padding: 17px 0px 0px 0px;
  }

  /* 主选中导航样式 */
  .el-submenu.is-active>>>.el-submenu__title {
    /* color:#ffd04b !important;
  border-left: 3px solid #ffd04b; */
    background: linear-gradient(90deg, #5962FF, #8265FF);
    border-radius: 0px 10px 10px 0px;
    color: white !important;
    width: 170px;
  }

  .el-menu-item:focus,
  .el-menu-item:hover {
    outline: 0;
    background-color: white !important;
  }

  .el-icon-con1 {
    background: url(../../assets/images/nav_tb1.png) center no-repeat;
    background-size: 100% 100%;
    width: 15px !important;
    height: 15px;
  }

  .el-submenu.is-active>>>.el-icon-con1 {
    background: url(../../assets/images/nav_tb1_active.png) center no-repeat;
    background-size: 100% 100%;
    width: 15px;
    height: 15px;
  }

  .el-icon-con1:before {
    content: "con1";
    font-size: 16px;
    visibility: hidden;
  }


  .el-icon-con2 {
    background: url(../../assets/images/nav_tb2.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px !important;
    height: 16px;
  }

  .el-submenu.is-active>>>.el-icon-con2 {
    background: url(../../assets/images/nav_tb2_active.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px;
    height: 16px;
  }

  .el-icon-con2:before {
    content: "con1";
    font-size: 16px;
    visibility: hidden;
  }

  .el-icon-con3 {
    background: url(../../assets/images/nav_tb3.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px !important;
    height: 16px;
  }

  .el-submenu.is-active>>>.el-icon-con3 {
    background: url(../../assets/images/nav_tb3_active.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px;
    height: 16px;
  }

  .el-icon-con3:before {
    content: "con1";
    font-size: 16px;
    visibility: hidden;
  }


  .el-icon-con4 {
    background: url(../../assets/images/nav_tb4.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px !important;
    height: 16px;
  }

  .el-submenu.is-active>>>.el-icon-con4 {
    background: url(../../assets/images/nav_tb4_active.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px;
    height: 16px;
  }

  .el-icon-con4:before {
    content: "con1";
    font-size: 16px;
    visibility: hidden;
  }

  .el-icon-con5 {
    background: url(../../assets/images/nav_tb5.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px !important;
    height: 16px;
  }

  .el-submenu.is-active>>>.el-icon-con5 {
    background: url(../../assets/images/nav_tb5_active.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px;
    height: 16px;
  }

  .el-icon-con5:before {
    content: "con1";
    font-size: 16px;
    visibility: hidden;
  }

  .el-icon-con6 {
    background: url(../../assets/images/nav_tb6.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px !important;
    height: 16px;
  }

  .el-submenu.is-active>>>.el-icon-con6 {
    background: url(../../assets/images/nav_tb6_active.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px;
    height: 16px;
  }

  .el-icon-con6:before {
    content: "con1";
    font-size: 16px;
    visibility: hidden;
  }

  .el-icon-con7 {
    background: url(../../assets/images/nav_tb7.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px !important;
    height: 16px;
  }

  .el-submenu.is-active>>>.el-icon-con7 {
    background: url(../../assets/images/nav_tb7_active.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px;
    height: 16px;
  }

  .el-icon-con7:before {
    content: "con1";
    font-size: 16px;
    visibility: hidden;
  }

  .el-icon-con8 {
    background: url(../../assets/images/nav_tb8.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px !important;
    height: 16px;
  }

  .el-submenu.is-active>>>.el-icon-con8 {
    background: url(../../assets/images/nav_tb8_active.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px;
    height: 16px;
  }

  .el-icon-con8:before {
    content: "con1";
    font-size: 16px;
    visibility: hidden;
  }


  .el-icon-con9 {
    background: url(../../assets/images/nav_tb9.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px !important;
    height: 16px;
  }

  .el-submenu.is-active>>>.el-icon-con9 {
    background: url(../../assets/images/nav_tb9_active.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px;
    height: 16px;
  }

  .el-icon-con9:before {
    content: "con1";
    font-size: 16px;
    visibility: hidden;
  }
</style>
